<template>
  <div
    class="fileShow"
    id="fileShow"
  >
    <div v-if="advancedFunStatus === 2" class="buttons">
      <div
        v-if="advancedFunButtonStatus !== 5"
        @click="changeImg(0)"
        class="img-button"
        :class="{'img-selected': curImgIndex === 0}"
        style="width: 100px;marginRight: 16px;"
      >
        <span>原始图像</span>
      </div>
      <div
        @click="changeImg(1)"
        class="img-button"
        :class="{'img-selected': ( (curImgIndex === 1 && advancedFunButtonStatus !== 5 )||(curImgIndex === 1 && advancedFunButtonStatus === 5 && tableExit )  ),
        'img-disabled':(this.advancedFunImgSrc === '' && advancedFunButtonStatus !== 4 && advancedFunButtonStatus !== 5 ),
        'img2-disabled':(advancedFunButtonStatus === 4 && dealSealAndFingerprintList.length === 0 ),
        }"
        :title="(this.advancedFunImgSrc === '' && advancedFunButtonStatus !== 4 && advancedFunButtonStatus !== 5 )?'正在处理...':''"
        style="width: 100px;marginRight: 16px;"
      >
        <span>{{curAdvancedFun}}</span>
      </div>
    </div>
    <div
      class="img-content"
      id="ocr-img-content"
      :class="{center:!imgSrc}"
      :style="{'height': ( advancedFunStatus === 2 && advancedFunButtonStatus !== 0 )?'calc(100% - 45px)': null,}"
    >
      <activeRect v-if="!(advancedFunStatus === 2 && advancedFunButtonStatus === 1 && curImgIndex === 0 )" />

      <div
        v-if="showSealAndFingerprint"
        v-for="(item, index) in dealSealAndFingerprintList"
        :key="index"
        :style="item"
        :class="{'seal-fingerprint-green': item.type === 'Fingerprint', 'seal-fingerprint-blue': item.type === 'Seal'}"
        class="seal-fingerprint"
      ></div>

      <div class="ocr-file-wrap" id="ocrFileWrap" ref="ocrFileWrap">
        <img
          id="ocr-file-show"
          ref="ocrFileShow"
          v-if="(imgSrc !== '' && !isTiff && showImg )"
          :style="{
          'margin': `0 0 0 0`,
          'width': `${imgRotateW!=='0px' ? imgRotateW : (`${imgWidth}%`)}`,
          'height': `${imgRotateH!=='0px' ? imgRotateH : null}`,
          'position': `${(imgRotateT!=='0px'&&imgRotateL!=='0px')?'absolute':null}`,
          'top': `${imgRotateT!=='0px' ? imgRotateT : null}`,
          'left': `${imgRotateL!=='0px' ? imgRotateL : null}`,
          'transform': `rotate(${imgRotate}deg)`
        }"
          :src="( (imgRotateAngleSrc&&imgRotateAngleSrc!=='')? imgRotateAngleSrc : imgSrc )"
          alt="图片展示"
        >
        <div
          id="ocr-tifffile-show"
          v-show="isTiff && showImg"
          :style="{'width': (isTiff && showImg)?'100%':'0', 'height': (isTiff && showImg)?'100%':'0', 'transform':`rotate(${imgRotate}deg)`}"
        >
        </div>
      </div>
      <div class="shadowGrayList"
        v-if="!shadowGrayShow && shadowGrayData && shadowGrayData.length > 0"
        :style="{'left': imgWidth<100?((100-imgWidth)/2)+'%':'','top':advancedFunStatus === 2 ? 0 : '2px'}"
      >
        <div
          v-for="v in shadowGrayData"
          v-if="v.id == id && v.picIndex == (fileNo*1-1)"
          :key="v.id"
          @click="currentShadow(v)"
          class="current-shadow-gray-list"
          :style="{left: `${v.shadowArr.left*(screenShotsRect.width/v.width)*(imgWidth/100)}px`,top: `${v.shadowArr.top*(screenShotsRect.width/v.width)*(imgWidth/100)}px`,width: `${v.shadowArr.width*(screenShotsRect.width/v.width)*(imgWidth/100)}px`,height: `${v.shadowArr.height*(screenShotsRect.width/v.width)*(imgWidth/100)}px`}"
        >
        </div>
      </div>

     <!-- <div
        id="ocr-tifffile-show"
        v-show="isTiff && showImg"
        :style="{'width': (isTiff && showImg)?'100%':'0', 'height': (isTiff && showImg)?'100%':'0', 'transform':`rotate(${imgRotate}deg)`}"
      >
      </div>-->

      <status class="status" v-show="( !showImg )" label="努力加载中"/>
    </div>

    <screenShotsWeb
      :imgSrc="( (imgRotateAngleSrc&&imgRotateAngleSrc!=='')? imgRotateAngleSrc : imgSrc )"
      :screenShotsRect="screenShotsRect"
      :screenShotsOffset="screenShotsOffset"
      :imgWidth="`${imgRotateW!=='0px' ? imgRotateW : (`${imgWidth/100}`)}`"
      v-if="shadowGrayShow"/>

    <div class="pdf-pagination" v-show="!isTiff">
      <div flex="cross:center">
        <template v-if="moreImg==1">
          <vi-icon @click="fileNo>1?fileNo--:fileNo=1" class="page-icon-left" type="caret-left"/>
          <input @keyup.enter="submit($event)" @blur="fileNoChange($event)" v-model="fileNoInput" type="number" size="small" class="page">
          <span style="margin: 0 5px;">/</span>
          <span class="m-r-8 font-12">{{fileMax}}</span>
          <vi-icon @click="fileNo++" class="page-icon-right" type="caret-right"/>
        </template>

        <div v-if="moreImg==2" class="pdf-pagination-loading">
          <vi-icon type="loading" />
          <span>加载中...</span>
        </div>

        <img
          @click="changeImgWidth(-20)"
          :class="{disabled:isMin}"
          :src="smallerIcon"
          alt="smaller"
        >
        <img @click="changeImgWidth(20)" :class="{disabled:isMax}" :src="biggerIcon" alt="bigger">
      </div>
    </div>
    <div class="screen-btn" v-if="!shadowGrayShow && showImg" @click="screenshots">
      <img class="color-filter" src="../../assets/image/screen_web.png">
    </div>
  </div>
</template>

<script>
import activeShowMinxin from "../../mixin/activeShow.mixin";
import activeRect from "./activeRect";
import status from "../public/status";
import { ImgBasePath } from "../../libs/http";

import Tiff from "tiff.js";
import $ from 'jquery';
import _ from 'lodash';
import screenShotsWeb from "./screenShotsWeb";
import bus from '../../libs/event-bus'

export default {
  mixins: [activeShowMinxin],
  components: { activeRect, status, screenShotsWeb},
  data() {
    return {
      smallerIcon: require("@/assets/image/smaller.svg"),
      biggerIcon: require("@/assets/image/bigger.svg"),
      fileNo: 1,
      fileNoInput: 1,
      fileMax: 1,
      imgWidth: 100,
      isMin: false,
      isMax: false,
      moreImg: 0, // 0没有 1分页 2加载中
      pdfList: null,
      imgId: "",
      imgSrc: "",
      isTiff: false, // 当前展示是不是 tiff
      timeout: null,
      pdfRefresh: true, // 加载过程中，pdf只刷新一次
      curImgIndex: 0,
      fileNumOrIdChange: false, // 文件刷新
      imgRotateW: '0px', // 文件旋转后展示宽度
      imgRotateH: '0px', // 文件旋转后展示高度
      imgRotateT: '0px',
      imgRotateL: '0px',
      imgRotate: 0, // 文件旋转角度
      showSealAndFingerprint: false, // 是否展示签章和手印
      dealSealAndFingerprintList: [], //处理后的签章和手印数组
      showImg: false, // 控制图片重新渲染 false加载状态
      screenShotsRect: null, // 截图图片偏移值
      screenShotsOffset: null, // 截图图片偏移值
    };
  },
  mounted(){
    bus.$on('getScreenShotsRect',()=>{
      this.screenShotsRect = this.$refs.ocrFileWrap.getBoundingClientRect();
    })
    bus.$on('fileNoPage', file=>{
      this.getPdfList(file)
    })
  },
  methods: {
    changeImgWidth(int) {
      this.setNeedShowActiveOcrText(false);
      if ((int > 0 && this.isMax) || (int < 0 && this.isMin)) {
        return;
      }
      this.imgWidth += int;
    },
    getImageUrl(fileItem) {
      this.imgWidth = 100;
      this.setNeedShowActiveOcrText(false);
      if (!fileItem || !Object.keys(fileItem).length) return;
      this.setImgInfo(false);
      setTimeout(() => {

        let type = fileItem.fileType;
        if(type.toLowerCase() === 'tiff' || type.toLowerCase() === 'tif'){
          this.imgSrc = '';
          this.isTiff = true;
          this.showImg = true;

          Tiff.initialize({ TOTAL_MEMORY :200*1024*1024 });
          let promiseGetTifImg = new Promise(function(resolve ,reject){
            var xhr = new XMLHttpRequest();
            xhr.open('GET', `${window.GLOBAL_CONFIG.fastdfs}/${fileItem.filePath}`);
            xhr.responseType = 'arraybuffer';
            xhr.onload = function (e) {
              resolve(xhr.response)
            };
            xhr.error = function (e) {
              reject(e)
            };
            xhr.send();
          })
          promiseGetTifImg.then(res=>{
            var buffer = res;
            var tiff = new Tiff({buffer: buffer});
            var canvas = tiff.toCanvas();
            if (canvas) {
              canvas.style.width = 'calc(100% - 32px)';
              document.getElementById('ocr-tifffile-show').innerHTML = ''; // 可以清除
              $('#ocr-tifffile-show').append(canvas);
            }
          })
          // console.log( 'getImageUrl', ImgBasePath, fileItem, this.imgSrc );
        }
        else{
          this.imgSrc = fileItem.formatPath
          ? `${window.GLOBAL_CONFIG.fastdfs}/${fileItem.formatPath}`
          : `${window.GLOBAL_CONFIG.fastdfs}/${fileItem.filePath}`;
          this.isTiff = false;
          this.showImg = true;

          // if(!fileItem.formatPath){
            // this.getImgOrientation( this.imgSrc );
          // }
        }

        // this.adjustImgAngle();

        // console.log( 'getImageUrl', this.isTiff, window.GLOBAL_CONFIG.fastdfs, this.imgSrc, this.showImg );

      }, 0);
    },
    // 图片倾斜角度
    getImgOrientation(imgSrc){
      // console.log( 'getImgOrientation', imgSrc, this.$exif);
      new Promise((resolve, reject) => {
        let oImage = new Image();
        oImage.src = imgSrc;
        oImage.onload = () =>{
          this.$exif.getData( oImage, ()=>{
            // console.log( this.$exif.getTag(oImage, 'Orientation') );
            let orientation = this.$exif.getTag(oImage, 'Orientation');
            if( orientation === 1 ){
              //  不旋转
              this.imgRotate = 0;
            }
            else if( orientation === 3 ){
              // 旋转 180 度
              this.imgRotate = 180;
            }
            else if( orientation === 6 ){
              // 旋转 90 度（顺时针）
              this.imgRotate = 90;
            }
            else if( orientation === 8 ){
              // 旋转 270 度（顺时针）
              this.imgRotate = 270;
            }
            resolve( this.$exif.getTag(oImage, 'Orientation') );
          } );
        };
        oImage.onerror = () =>{
          reject('获取报错');
        };
      });
    },
    // 调整图片旋转角度
    adjustImgAngle () {
      this.showImg = true;
      return
      this.showImg = false;
      this.imgRotateW = '0px';
      this.imgRotateH = '0px';
      this.imgRotateT = '0px';
      this.imgRotateL = '0px';

      // 高级功能 新图像
      if (this.advancedFunStatus === 2 && this.curImgIndex === 1) {
        this.imgRotate = 0;
      }
      // 高级功能 原始图像
      if(this.advancedFunStatus === 2 && this.curImgIndex === 0){
        this.imgRotate = 0;
      }
      else {
        // 图片渲染成功
        if( $('#ocr-file-show')[0] && $('#ocr-img-content')[0] && false ){
          //
          if( $('#ocr-file-show')[0].clientWidth > $('#ocr-file-show')[0].clientHeight &&
            $('#ocr-file-show')[0].clientWidth > $('#ocr-file-show')[0].clientHeight &&
            $('#ocr-file-show')[0].clientWidth && $('#ocr-file-show')[0].clientHeight && $('#ocr-img-content')[0].clientHeight
            && ( this.imgRotateAngle === '90' || this.imgRotateAngle == '270' )
          ){
            //
            let w = $('#ocr-file-show')[0].clientWidth;
            let h = $('#ocr-file-show')[0].clientHeight;
            let cW = $('#ocr-img-content')[0].clientWidth;
            let H = 0;
            if( ( (w-8)*w )/h > cW ){
              H = (w-8);
            }
            else{
              H = w;
            }
            let W = ( H * w ) / h;
            let o = { t: $('#ocr-file-show')[0].clientWidth/2, l: $('#ocr-file-show')[0].clientHeight/2 }; // 圆心
            // let O = { t: H/2, l: W/2 }; // 圆心
            this.imgRotateW = `${W}px`;
            this.imgRotateH = `${H}px`;
            this.imgRotateT = `${(o.t - (h/2))}px`;
            this.imgRotateL = `${(o.l - (w/2))}px`;

            console.log('adjustImgAngle',
              this.imgRotateAngle,
              $('#ocr-file-show'), $('#ocr-file-show')[0].clientHeight, $('#ocr-file-show')[0].clientWidth,
              $('#ocr-img-content'), $('#ocr-img-content')[0].clientWidth,
              this.imgRotateW, this.imgRotateH,
              this.imgRotateT, this.imgRotateL,
              o,
            );
          }
          else{
            //
          }
          //
        }

        // this.imgRotate = -this.imgRotateAngle;

      }
      this.showImg = true;

    },
    fileNoChange(evnet) {
      // console.log( 'fileNoChange', evnet, event.path[0].value, this.fileNoInput, val );
      this.fileNoInput = this.fileNo;
    },
    submit(evnet) {
      let val = Number( Number(event.path[0].value).toFixed(0) );
      this.fileNo = val;

      // this.getImageUrl(this.pdfList[this.fileNo - 1]);
      // setTimeout(() => {
      //   this.setPdfItem(this.pdfList[this.fileNo - 1]);
      // }, 500);
    },
    getPdfList(file) {
      this.$http(this.$url.getSubFileList, { parentId: file.id }).then(
        result => {
          this.moreImg = 1;
          this.fileMax = file.filePage;
          // this.setPdfItem({});

          if (file.filePage > 0) {
            if (result.length < file.filePage) {
              //pdf列表没有获取到全部结果，循环获取结果，直至全部获取
              this.timeout = setTimeout(() => {
                this.getPdfList(file);
              }, 2000);

            }
          }

          if(result.length){
            let array0 = _.cloneDeep(result);
            let array1 = [];
            array0.map( v =>{
              //ccc待修改
              array1[v.filePage-1] = v;
              // array1[v.filePage] = v;
            } );

            this.pdfList = array1;
            let obj = {index: this.$store.state.activeFile.pdfChildInfo.index, list: array1 }
            this.setPdfChildInfo(obj);
            this.setLoadingLabel(``); // 关闭请求图片列表

            if(this.pdfRefresh){
              // console.log( 'getPdfList1', this.pdfList, result, array0, array1, this.$store.state.activeFile.searchKeyNo );
              //pdf列表有内容，默认展示第一页内容
              this.setImgInfo(true);

              let array2 = array1.filter( v => v.filePage );
              let fileObj = array2[0];
              if(this.$store.state.activeFile.searchKeyNo !== 1){
                array2.map( (v,i)=>{
                  if( v.filePage == this.$store.state.activeFile.searchKeyNo && v.id ){
                    fileObj = v;
                  }
                } )
                this.setSearchKeyNo(1);
              }
              this.fileNo = fileObj.filePage;
              this.getImageUrl(fileObj);
              this.setPdfItem({});
              setTimeout(() => {
                this.setPdfItem(fileObj);
              }, 100);
              this.pdfRefresh = false;
            }

          }

        }
      );
    },
    changeImg(index, notGetImg) {
      if (index === 0) {
        if(!this.fileItem){
          return
        }
        this.showSealAndFingerprint = false;
        // fileNo变化时调用了getImageUrl，这里就不重复调用
        if (!notGetImg) {
          if (this.fileItem.fileType && (this.fileItem.fileType.toLowerCase() == "pdf")) {
            this.getImageUrl(this.pdfItem);
          } else {
            this.getImageUrl(this.fileItem);
          }
        }
        if (this.advancedFunButtonStatus === 1) {
          this.showImg = false;
        }
        this.curImgIndex = 0;
      }
      else if (index === 1) {
        if(this.advancedFunImgSrc === '' && ( this.advancedFunButtonStatus === 1 || this.advancedFunButtonStatus === 2 || this.advancedFunButtonStatus === 3 ) ){
          return
        };

        if (this.advancedFunButtonStatus === 4 && !this.sealAndFingerprintList.length) {
          this.$message.warn(`未检测到手印签章！`);
          return
        }

        if (this.advancedFunOcrStatus !== 0){
          return
        };

        this.curImgIndex = 1;
        this.setAdvancedFunOcrStatus(this.advancedFunButtonStatus);

        if (this.advancedFunButtonStatus !== 4 && this.advancedFunButtonStatus !== 5){
          this.imgSrc = `${window.GLOBAL_CONFIG.fastdfs}/${this.advancedFunImgSrc}`;
        }
        if (this.advancedFunButtonStatus === 4) {
          let list = this.sealAndFingerprintList||[];
          this.dealSealAndFingerprintList = _.cloneDeep(this.dealList(list));
          this.showSealAndFingerprint = true;
        }

      }

      if (document.getElementById("ocr-img-content")) {
        document.getElementById("ocr-img-content").scrollTop = 0;
      }
      // this.setNeedGetOcrResult(true);
    },
    dealList(array) {
      let dom = document.getElementById("ocr-file-show") ? document.getElementById("ocr-file-show") : document.querySelector("#ocr-tifffile-show canvas");
      if (!dom || !array.length) {
        return [];
      }
      let domWidth = dom.offsetWidth,
        pr = domWidth / array[0].imgRect.w,
        result = [];
      array.forEach(item => {
        result.push({
          width: item.rect.w * pr + "px",
          height: item.rect.h * pr + "px",
          top: item.rect.y * pr + "px",
          left: item.rect.x * pr + "px",
          position: "absolute",
          type: item.type
        })
      })
      return result;
    },
    // 获取 示例文件夹的文件id
    getExampleFolderId() {
      for (let i = 0; i < this.folderList.length; i++) {
        if (this.folderList[i].dirType === 1) {
          return {id: this.folderList[i].id, index: i};
        }
      }
    },
    // 截图操作
    screenshots(){
      this.setShadowGrayShow(true)
      // web页面截图模式下添加偏移值获取
      this.screenShotsRect = this.$refs.ocrFileWrap.getBoundingClientRect();
      this.screenShotsOffset = {
        left: document.getElementById('ocr-img-content').scrollLeft,
        top: document.getElementById('ocr-img-content').scrollTop
      }
    },
    currentShadow(data){
      bus.$emit('identifyResult', data)
    },
  },
  watch: {
    imgWidth(newValue) {
      this.isMin = newValue <= 80 ? true : false;
      this.isMax = newValue >= 180 ? true : false;
      this.$nextTick(() => {
        bus.$emit('getScreenShotsRect');//每次改变触发计算
        let list = this.sealAndFingerprintList||[];
        this.dealSealAndFingerprintList = _.cloneDeep(this.dealList(list));
      })
    },
    fileItem: {
      handler(file,oldFile) {
        if (_.isEqual(file, oldFile)) {
          return
        }
        $("#ocr-tifffile-show").empty();
        this.isTiff = false;
        this.timeout && clearTimeout(this.timeout);
        this.fileNoInput = this.fileNo = 1;
        this.showImg = false;
        this.imgSrc = "";
        this.imgRotate = 0;
        this.pdfList = [];
        let obj = {index: 0, list: [] }
        this.setPdfChildInfo(obj);

        if (!file || !file.id) {
          return;
        }
        this.fileNumOrIdChange = true;
        this.changeImg(0);
        this.setAdvancedFunImgSrc('');

        //非pdf类型直接展示源文件
        if (file.fileType.toLowerCase() !== "pdf") {
          this.getImageUrl(file);
          this.moreImg = 0;
          return;
        }

        // 文件为pdf切已完成多页面选择操作
        if(file.fileType === "pdf" && file.status === 0){
          this.setLoadingLabel(`加载中...`);
          this.setPreviewStatus(true)
        }else {
          this.setPreviewStatus(false) // 取消后的多页PDF多页选择
        }
        this.getPdfList(file);
        this.pdfRefresh = true;
        // console.log('fileItem', file, this.pdfRefresh );
      },
      deep: true,
      immediate: true
    },
    fileNo(newValue) {

      let fileNo = Number(newValue);

      bus.$emit('identifyResult',null,true) // 关闭截图识别遮罩层

      if (fileNo < 1) {
        this.fileNo = 1;
        return;
      } else if (fileNo > this.fileMax) {
        this.fileNo = this.fileMax;
        return;
      }

      this.fileNo = Number( fileNo.toFixed(0) );
      this.fileNoInput = this.fileNo;

      this.fileNumOrIdChange = true;
      this.changeImg(0, true);
      this.setAdvancedFunImgSrc('');
      this.imgRotate = 0;
      // console.log( 'fileNo0', newValue, this.fileMax, fileNo, this.fileNo, this.pdfList[fileNo - 1] );

      if (typeof this.fileNo == "number") {
        // console.log( 'fileNo1', this.pdfList, newValue, this.pdfList[fileNo - 1] );
        this.$nextTick(() => {

          if( this.pdfList[fileNo - 1] !== undefined ){
            let result = this.pdfList[fileNo - 1];
            this.getImageUrl(result);
            setTimeout(() => {
              this.setPdfItem(result);
            }, 100);

            let obj = {index: (fileNo - 1), list: this.$store.state.activeFile.pdfChildInfo.list }
            this.setPdfChildInfo(obj);
          }else{
            this.imgId = '';
            this.imgSrc = '';
            this.showImg = false;
            this.getImageUrl(null);
            this.setPdfItem({});
            let obj = {index: (fileNo - 1), list: this.$store.state.activeFile.pdfChildInfo.list }
            this.setPdfChildInfo(obj);
          }

        });
      }else{
        this.imgId = '';
        this.imgSrc = '';
        this.getImageUrl(null);
        this.setPdfItem({});
        let obj = {index: (fileNo - 1), list: this.$store.state.activeFile.pdfChildInfo.list }
        this.setPdfChildInfo(obj);
      }
    },
    pdfList: {
      handler(newList) {
        if (
          newList &&
          newList.length &&
          (this.fileItem.fileType.toLowerCase() == "pdf" )
        ) {
          if(newList[this.fileNo - 1]){
            if (this.imgId !== newList[this.fileNo - 1].id) {
              this.imgId = newList[this.fileNo - 1].id;
              let result = newList[this.fileNo - 1];
              this.getImageUrl(result);
              setTimeout(() => {
                this.setPdfItem(result);
              }, 100);
            }
          }
          else{
            this.moreImg = 1;
            this.imgId = '';
            this.imgSrc = '';
          }
        }
      },
      deep: true
    },
    searchKeyFresh(newValue){
      // console.log('searchKeyFresh', newValue, this.$store.state.activeFile.searchKeyNo, this.fileItem );
      if(newValue){
        this.fileNo = this.$store.state.activeFile.searchKeyNo;
        this.setSearchKeyFresh(false);
        this.setSearchKeyNo(1);
      }
    },
    advancedFunImgSrc(newVal) {
      if (newVal) {
        // this.changeImg(1);
      }
    },
    advancedFunButtonStatus (newVal) {
      if (newVal) {
        this.changeImg(0);
        this.setAdvancedFunImgSrc('');
        this.adjustImgAngle();
      }
    },
    curImgIndex (newVal, oldVal) {
      if (newVal === 0 && oldVal === 1 && !this.fileNumOrIdChange) {
        this.setNeedGetOcrResult(true);
      }
      this.fileNumOrIdChange = false;
    },
    sealAndFingerprintList (newVal) {
      let list = newVal||[];
      this.dealSealAndFingerprintList = _.cloneDeep(this.dealList(list));
    },
    advancedFunStatus (newVal, oldVal) {
      if (newVal === 2) {
        this.adjustImgAngle();
      }
      if (newVal === 1 && oldVal === 2) {
        this.changeImg(0);
      }
    },
    imgRotateAngle: {
      handler(newVal, oldVal) {
        this.adjustImgAngle();
      },
      deep: true,
      immediate: true,
    },
    /*previewStatus(val){
      //pdf类型需要获取文件下所有图片
      if(!val){
        this.getPdfList(this.fileItem);
        this.pdfRefresh = true;
      }
    }*/
  },
  computed: {
    fileItem() {
      return this.$store.state.activeFile.item;
    },
    pdfItem() {
      return this.$store.state.activeFile.pdfItem;
    },
    // 当前页文件是否刷新页码在搜索之后
    searchKeyFresh() {
      return this.$store.state.activeFile.searchKeyFresh;
    },
    advancedFunStatus() {
      return this.$store.state.status.advancedFunStatus;
    },
    advancedFunImgSrc() {
      return this.$store.state.status.advancedFunImgSrc;
    },
    advancedFunButtonStatus() {
      return this.$store.state.status.advancedFunButtonStatus;
    },
    advancedFunOcrStatus() {
      return this.$store.state.status.advancedFunOcrStatus;
    },
    curAdvancedFun() {
      if (this.advancedFunButtonStatus === 1) {
        return '歪斜校正';
      } else if (this.advancedFunButtonStatus === 2) {
        return '图像切边';
      } else if (this.advancedFunButtonStatus === 3) {
        return '分栏切分';
      } else if (this.advancedFunButtonStatus === 4) {
        return '自动检测';
      } else if (this.advancedFunButtonStatus === 5) {
        return this.tableExit?'文字模式':'表格模式';
      }
    },
    tableExit() {
      return this.$store.state.status.tableExit;
    },
    sealAndFingerprintList() {
      return this.$store.state.file.sealAndFingerprintList;
    },
    // dealSealAndFingerprintList() {
    //   let array0 = _.cloneDeep(this.dealList(this.sealAndFingerprintList||[]));
    //   let num = this.imgWidth/100;
    //   let obj = {};
    //   array0.map( (v,i)=>{
    //     // v.height = `${Math.round( parseInt( v.height.substring(0, v.height.length-2 ) ) * num )}px`;
    //     // v.width = `${Math.round( parseInt( v.width.substring(0, v.width.length-2 ) ) * num )}px`;
    //     // v.top = `${Math.round( parseInt( v.top.substring(0, v.top.length-2 ) ) * ((num==0.8)?0.82:num) )}px`;
    //     // v.left = `${Math.round( parseInt( v.left.substring(0, v.left.length-2 ) ) * ((num==0.8)?0.82:num) )}px`;
    //     v.zIndex = '1';
    //   } );
    //   // console.log( this.imgWidth, (this.imgWidth/100), this.sealAndFingerprintList, array0 );
    //   return array0;
    // },
    folderList() {
      return this.$store.state.file.folderList;
    },
    dirId() {
      return this.$store.state.user.dirId;
    },
    imgRotateAngle() {
      return this.$store.state.status.imgRotateAngle;
    },
    imgRotateAngleSrc() {
      return this.$store.state.status.imgRotateAngleSrc;
    },
    previewStatus() {
      return this.$store.state.file.previewStatus;
    },
    shadowGrayShow() {
      return this.$store.state.file.shadowGrayShow;
    },
    id() {
      return this.$store.state.activeFile.id;
    },
    shadowGrayData() {
      return this.$store.state.activeFile.shadowGrayData;
    },
  },
  beforeDestroy() {
    bus.$off('getScreenShotsRect')
    bus.$off('fileNoPage')
  }
};
</script>

<style lang="less" scoped>
.fileShow {
  background: white;
  text-align: center;
  margin-right: 16px;
  position: relative;

  .buttons {
    display: flex;
    justify-content: flex-end;
    height: 50px;
    margin-right: 50px;
    align-items: center;
    .img-button {
      height: 32px;
      line-height: 32px;
      border-radius: 3px;
      border: 1px solid @primary;
      background-color: transparent;
      color: @primary;
      text-align: center;
      cursor: pointer;
      margin-top: 15px;
      &:hover {
        background-color: rgba(@primary, 0.4);
        border: 1px solid rgba(@primary, 0.4);
        color: #fff;
      }
    }
    .img-selected {
      border: 1px solid @primary;
      background-color: @primary;
      color: #fff;
    }
    .img-disabled{
      color: rgba(0,0,0,.25) !important;
      background-color: #f5f5f5 !important;
      border-color: #d9d9d9 !important;
      cursor: wait !important;
    }
    .img2-disabled{
      color: rgba(0,0,0,.25) !important;
      background-color: #f5f5f5 !important;
      border-color: #d9d9d9 !important;
      cursor: not-allowed !important;
    }
  }

  img[alt="图片展示"] {
    width: 100%;
    margin: 0px;
    /*float: left;*/
  }

  .img-content {
    position: absolute;
    border: 16px solid transparent;
    overflow: auto;
    width: 100%;
    height: 100%;

    &.center {
      align-items: center;
      display: flex;
      justify-items: center;
      justify-content: center;
    }

  }

  .pdf-pagination {
    position: absolute;
    user-select: none;
    display: flex;
    z-index: 1;
    align-items: center;
    justify-items: center;
    justify-content: center;
    width: 80%;
    margin: 0 10%;
    bottom: 32px;

    & > div {
      background: white;
      padding: 8px 16px;
      border-radius: 30px;
      border: 1px solid #aaa;
    }

    input {
      background: transparent;
    }

    i:before {
      cursor: pointer;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
      margin: 0;
    }

    .page {
      width: 2rem;
      outline: none;
      font-size: 12px;
      border: 1px solid #aaa;
      text-align: center;
      background: transparent;
    }

    .pdf-pagination-loading{
      display: inline-block;
      padding: 0 5px;
      span{
        margin: 0 0 0 5px;
      }
    }
  }
}

img[alt="smaller"],
img[alt="bigger"] {
  width: 20px;
  height: 20px;
  cursor: pointer;

  &.disabled {
    cursor: not-allowed;
  }
}

.m-l-8 {
  margin-left: 8px;
}

img[alt="smaller"] {
  margin-right: 8px;
}

.page-icon-right {
  &::before {
    margin: 0 8px;
  }
}

.page-icon-left {
  &::before {
    margin-right: 8px;
  }
}

.seal-fingerprint {
  outline: 3px solid red;
  z-index: 1;
}
.seal-fingerprint-blue {
  outline: 3px solid @primary;
}
.seal-fingerprint-green {
  outline: 3px solid green;
}
.status {
  height: 90%;
}
.screen-btn{
  position: absolute;
  right: 30px;
  top: 10px;
  display: inline-block;
  width: 25px;
  height: 25px;
  background: #fff;
  z-index: 2;
  img{
    width: 100%;
    height: 100%;
    background-size: 100%;
  }
}
.shadowGrayList{
  position: absolute;
  .current-shadow-gray-list{
    position: absolute;
    border: 1px solid red;
    user-select: none;
    background: rgba(red,0.2);
  }
}

.ocr-file-wrap{
  height: 100%;
}
</style>
